import * as echarts from 'echarts'
// ! 工单统计
export const orderData = (data) => {
  let xdata = [], ydata = [], ydata2 = [], ydata3 = []
  let cusEnum = {
    processedCount: '已处理',
    receivedCount: '已回执',
    waitCount: '待处理'
  }

  for (const key in data) {
    xdata.push(cusEnum[key])
    ydata.push(data[key])
    ydata3.push(data[key])
  }
  for (const key in ydata) {
    ydata2.push(ydata3.sort((a, b) => b - a).at(0))
  }

  // 颜色
  var lightBlue = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
      offset: 0,
      color: '#0DB799' // 0% 处的颜色
    }, {
      offset: 1,
      color: '#03FBFE' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
  }

  // 指定图表的配置项和数据
  var option = {
    tooltip: {
      show: false
    },
    grid: {
      top: '20%',
      left: '10%',
      right: '5%',
      bottom: '20%',
    },
    xAxis: {
      data: xdata,
      // offset: 15,
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#014B4C',
        },
      },
      axisLabel: {
        color: '#03A6A9',
        fontSize: 14
      }
    },
    yAxis: {
      min: 0,
      // max: 100,
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#014B4C',
        },
      },
      axisLabel: {
        show: true,
        color: '#05898B'
      }
    },
    series: [{
      type: 'bar',
      itemStyle: {
        color: lightBlue
      },
      barWidth: '40%',
      data: ydata,
      z: 10
    },
    {
      type: 'bar',
      barGap: '-100%',
      itemStyle: {
        opacity: 1,
        color: '#023234',
        borderColor: '#00646B',
      },
      label: {
        show: true,
        position: 'top',
        // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
        padding: 10,
        color: '#03FBFE',
        fontfamily: 'DIN',
        fontweight: 'bold',
        fontSize: 14,
        formatter: function (dataIndex) {
          return option.series[0].data[dataIndex.dataIndex]
        },
      },
      barWidth: '40%',
      data: ydata2,
      z: 5
    }
    ],
  }
  return option
}

// ! 工单统计
export const res1 = (data) => {
  let showTopLable = data > 50 ? false : true
  let showBotLable = data <= 50 ? false : true
  let option = {
    tooltip: {
      trigger: 'none'
    },
    grid: {
      top: '14%',
      bottom: '14%'
    },
    xAxis: {
      data: ["百分比"],
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: '#e54035'
        }
      }
    },
    yAxis: {
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    series: [
      {
        name: '最上层立体圆',
        type: 'pictorialBar',
        symbolSize: [80, 10],
        symbolOffset: [0, -5],
        z: 12,
        itemStyle: {
          normal: {
            color: '#03acae'
          }
        },
        data: [{
          value: 100,
          symbolPosition: 'end'
        }]
      },
      {
        name: '中间立体圆',
        type: 'pictorialBar',
        symbolSize: [80, 10],
        symbolOffset: [0, -5],
        z: 12,
        itemStyle: {
          normal: {
            color: '#00f8ff'
          }
        },
        data: [{
          value: data,
          symbolPosition: 'end'
        }]
      },
      {
        name: '最底部立体圆',
        type: 'pictorialBar',
        symbolSize: [80, 10],
        symbolOffset: [0, 5],
        z: 12,
        itemStyle: {
          normal: {
            color: '#00aab0'
          }
        },
        data: [100 - data]
      },
      {
        //底部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
          normal: {
            color: 'rgba(0,111,115,0.35)',
            opacity: .7
          }
        },
        label: {
          show: showTopLable,
          position: "top",
          distance: 15,
          color: "#FFFE00",
          fontSize: 20,
          formatter: '{c}'
        },
        silent: true,
        barWidth: 80,
        barGap: '-100%', // Make series be overlap
        data: [data]
      },
      {
        //上部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
          normal: {
            color: 'rgba(0,111,115,0.15)',
            opacity: .7
          }
        },
        label: {
          show: showBotLable,
          position: "bottom",
          distance: 15,
          color: "#FFFE00",
          fontSize: 20,
          formatter: `${data}` + '%'
        },
        silent: true,
        barWidth: 80,
        barGap: '-100%', // Make series be overlap
        data: [100 - data]
      }
    ]
  }
  return option
}

export const res2 = (data) => {
  let showTopLable = data > 50 ? false : true
  let showBotLable = data <= 50 ? false : true
  let option = {
    tooltip: {
      trigger: 'none'
    },
    grid: {
      top: '14%',
      bottom: '14%'
    },
    xAxis: {
      data: ["百分比"],
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: '#e54035'
        }
      }
    },
    yAxis: {
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    series: [
      {
        name: '最上层立体圆',
        type: 'pictorialBar',
        symbolSize: [80, 10],
        symbolOffset: [0, -5],
        z: 12,
        itemStyle: {
          normal: {
            color: '#03acae'
          }
        },
        data: [{
          value: 100,
          symbolPosition: 'end'
        }]
      },
      {
        name: '中间立体圆',
        type: 'pictorialBar',
        symbolSize: [80, 10],
        symbolOffset: [0, -5],
        z: 12,
        itemStyle: {
          normal: {
            color: '#e94266'
          }
        },
        data: [{
          value: data,
          symbolPosition: 'end'
        }]
      },
      {
        name: '最底部立体圆',
        type: 'pictorialBar',
        symbolSize: [80, 10],
        symbolOffset: [0, 5],
        z: 12,
        itemStyle: {
          normal: {
            color: '#e94266'
          }
        },
        data: [100 - data]
      },
      {
        //底部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
          normal: {
            color: 'rgba(233,66,102,0.57)',
            opacity: .7
          }
        },
        label: {
          show: showTopLable,
          position: "top",
          distance: 15,
          color: "#FFFE00",
          fontSize: 20,
          formatter: '{c}'
        },
        silent: true,
        barWidth: 80,
        barGap: '-100%', // Make series be overlap
        data: [data]
      },
      {
        //上部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
          normal: {
            color: 'rgba(0,111,115,0.15)',
            opacity: .7
          }
        },
        label: {
          show: showBotLable,
          position: "bottom",
          distance: 15,
          color: "#FFFE00",
          fontSize: 20,
          formatter: `${data}` + '%'
        },
        silent: true,
        barWidth: 80,
        barGap: '-100%', // Make series be overlap
        data: [100 - data]
      }
    ]
  }
  return option
}
